import React, { useState, useEffect } from 'react';
import { Form, Input, Textarea, Button, TagInput } from 'tdesign-react';

const PostForm = ({ post, onSubmit, onCancel }) => {
  const [formData, setFormData] = useState({
    id: post?.id || Date.now(),
    title: post?.title || '',
    content: post?.content || '',
    author: post?.author || '',
    date: post?.date || new Date().toISOString().split('T')[0],
    tags: post?.tags || []
  });

  useEffect(() => {
    if (post) {
      setFormData(post);
    }
  }, [post]);

  const handleSubmit = () => {
    onSubmit(formData);
  };

  const handleChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  return (
    <Form 
      labelWidth={80}
      style={{
        maxWidth: '800px',
        margin: '0 auto',
        padding: '30px',
        backgroundColor: '#fff',
        borderRadius: '12px',
        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)'
      }}
    >
      <Form.FormItem 
        label={
          <span style={{ 
            fontWeight: '600', 
            color: '#334155',
            fontSize: '1.05rem'
          }}>
            标题
          </span>
        } 
        required
        style={{ marginBottom: '24px' }}
      >
        <Input
          value={formData.title}
          onChange={(value) => handleChange('title', value)}
          style={{
            maxWidth: '100%',
            padding: '12px',
            fontSize: '1.05rem',
            borderRadius: '8px',
            border: '1px solid #cbd5e1'
          }}
          placeholder="请输入文章标题"
        />
      </Form.FormItem>
      
      <Form.FormItem 
        label={
          <span style={{ 
            fontWeight: '600', 
            color: '#334155',
            fontSize: '1.05rem'
          }}>
            作者
          </span>
        } 
        required
        style={{ marginBottom: '24px' }}
      >
        <Input
          value={formData.author}
          onChange={(value) => handleChange('author', value)}
          style={{
            maxWidth: '100%',
            padding: '12px',
            fontSize: '1.05rem',
            borderRadius: '8px',
            border: '1px solid #cbd5e1'
          }}
          placeholder="请输入作者姓名"
        />
      </Form.FormItem>
      
      <Form.FormItem 
        label={
          <span style={{ 
            fontWeight: '600', 
            color: '#334155',
            fontSize: '1.05rem'
          }}>
            标签
          </span>
        }
        style={{ marginBottom: '24px' }}
      >
        <TagInput
          value={formData.tags}
          onChange={(value) => handleChange('tags', value)}
          placeholder="请输入标签，回车确认"
          style={{
            maxWidth: '100%',
            minHeight: '46px',
            padding: '8px',
            borderRadius: '8px',
            border: '1px solid #cbd5e1'
          }}
        />
      </Form.FormItem>
      
      <Form.FormItem 
        label={
          <span style={{ 
            fontWeight: '600', 
            color: '#334155',
            fontSize: '1.05rem'
          }}>
            内容
          </span>
        } 
        required
        style={{ marginBottom: '30px' }}
      >
        <Textarea
          value={formData.content}
          onChange={(value) => handleChange('content', value)}
          autosize={{ minRows: 10 }}
          style={{
            maxWidth: '100%',
            fontSize: '1.05rem',
            padding: '14px',
            borderRadius: '8px',
            border: '1px solid #cbd5e1'
          }}
          placeholder="请输入文章内容"
        />
      </Form.FormItem>
      
      <Form.FormItem label=" ">
        <div style={{
          display: 'flex',
          flexDirection: window.innerWidth < 768 ? 'column' : 'row',
          gap: '16px',
          justifyContent: 'flex-end'
        }}>
          <Button 
            theme="default" 
            onClick={onCancel}
            style={{
              width: window.innerWidth < 768 ? '100%' : 'auto',
              padding: '12px 24px',
              fontSize: '1.05rem',
              borderRadius: '8px',
              fontWeight: '500',
              border: '1px solid #cbd5e1'
            }}
            hover
          >
            取消
          </Button>
          <Button 
            theme="primary" 
            onClick={handleSubmit} 
            style={{ 
              width: window.innerWidth < 768 ? '100%' : 'auto',
              padding: '12px 24px',
              fontSize: '1.05rem',
              borderRadius: '8px',
              fontWeight: '500'
            }}
            hover
          >
            提交
          </Button>
        </div>
      </Form.FormItem>
    </Form>
  );
};

export default PostForm;